<script lang="ts">
import { Component, Prop, Vue } from 'vue-facing-decorator';

@Component({})
export default class NovelTag extends Vue {
  @Prop() tag!: string;

  get url() {
    return '/query/tag?tag=' + encodeURIComponent(this.tag);
  }
}
</script>
<template>
<router-link :to="url" class="novel-tag">{{ tag }}</router-link>
</template>
<style scoped>
.novel-tag {
  display: inline-block;
  line-height: 1.5;
  padding: 0.25em 1em;
  border: 1px solid var(--el-border-color-light);
  border-radius: var(--el-border-radius-base);
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}

.novel-tag:hover {
  background-color: var(--el-color-primary-light-8);
  border-color: var(--el-color-primary-light-7);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
